<div style="padding-right: 22px;padding-left: 20px;text-align: left;position: relative">
    <div style="padding-left: 20px;position: absolute;top: 0;left: 400px;">
        <div style='margin-top: 10px;'>
            <input type="text" id="txt-name" placeholder="Tên khu vực"  style="padding: 4px 8px;margin:  0;"/>
        </div>
        <div style='margin-top: 10px;'>
            <input class="hidden" type="text" id="txt-shipprice" placeholder="Phí vận chuyển" value="0"  style="padding: 4px 8px;margin:  0;"/>
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Add' value="Thêm" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Remove' value="Xóa" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Overwrite' value="Lưu Đè" />
        </div>
        <p>
            <br/>
            Region : Node gốc( không thay đổi).<br/>
            Node cấp 1 : Tỉnh/Thành Phố.<br/>
            Node cấp 2 : Quận/Huyện.<br/>
            Node cấp 3 : Phường/Xã.<br/><br/>
            
            Thêm : Thêm mới node con vào node đang chọn.<br/>
            Xóa : Xóa node đang chọn.<br/>
            Lưu đè : Lưu đè vào node đang chọn (và retore node nếu node trước đó là đã xóa).<br/>
        </p>
    </div>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
        
    </div>
    
    
</div>
<script>
    function src(data){
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'parentid' },
                { name: 'text' },
                { name: 'name' },
                { name: 'ship' }
            ],
            id: 'id',
            localdata: data
            //url: '{{base_url()}}admin-planners/region/js_data/'
        };
        // create data adapter.
        var dataAdapter = new $.jqx.dataAdapter(source);
        // perform Data Binding.
        dataAdapter.dataBind();
        // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
        // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
        // specifies the mapping between the 'text' and 'label' fields.  
        var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}],'name','ship');
        return records;
    }
    $(document).ready(function () {
        var theme = "classic";
        $('#Add').jqxButton({ height: '25px', width: '100px', theme: theme });
        $('#Remove').jqxButton({ height: '25px', width: '100px', theme: theme });
        $('#Overwrite').jqxButton({ height: '25px', width: '100px', theme: theme });
        var data={{json_encode($src)}}
        var records=src(data);
        $('#jqxTree').jqxTree({ source: records, height: '400px', width: '300px', theme: theme });
        $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
        //$('#jqxTree').jqxTree('expandAll');
        $('#jqxTree').jqxTree('expandItem', $("#jqxTree").find('li:first')[0]);
        
        $('#Overwrite').click(function () {
            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
            var id=0;
            if (selectedItem != null) {
               id=selectedItem.id;
            }
            if(id==0){
                $('#window-notice').jqxWindow('setContent', "Không thể ghi đè vào Node gốc");
                $('#window-notice').jqxWindow('open');
                return;
            }else{
                var itemtext=selectedItem.label;
                //itemtext=itemtext.substring(18,itemtext.length-19);
                if(!confirm("Bạn muốn ghi đè vào '"+itemtext+"' ?")){
                    return;
                }
            }
            var surl="{{base_url()}}admin-planners/region/ovrreg";
            var sdata={
                id      :   id,
                params:{
                    name        :   $("#txt-name").val()
                    
                }
            };
            jQuery.ajax({
                    type:"POST", 
                    data:sdata, 
                    dataType:"text", 
                    url:surl, 
                    success: function (data){
                        try{
                            var result = $.parseJSON(data);
                            var records=src(result);
                            $('#jqxTree').jqxTree({ source: records});
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('expandItem', $("#jqxTree").find('li#'+id)[0]);
                                $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li#'+id)[0]);
                            }else{
                                $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
                                $('#jqxTree').jqxTree('expandAll');
                            }
                            return;
                        }catch(err){
                            location.reload();
                            //$('#window-error').jqxWindow('setContent',"JSON Error:"+err.message+"<br/>Content: "+data);
                            //$('#window-error').jqxWindow('open');
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError){
                        location.reload();
                        //$('#window-error').jqxWindow('setContent',"<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+thrownError+"<br/>"+surl);
                        //$('#window-error').jqxWindow('open');
                    }
            });
            
        });
        //add
        $('#Add').click(function () {
            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
            var parentid=0;
            if (selectedItem != null) {
               parentid=selectedItem.id;
            }
            
            var surl="{{base_url()}}admin-planners/region/addreg";
            var sdata={
                params:{
                    name        :   $("#txt-name").val(),
                    ship        :   0,//$("#txt-shipprice").val(),
                    parent      :   parentid
                }
            };
            jQuery.ajax({
                    type:"POST", 
                    data:sdata, 
                    dataType:"text", 
                    url:surl, 
                    success: function (data){
                        try{
                            var result = $.parseJSON(data);
                            var records=src(result);
                            $('#jqxTree').jqxTree({ source: records});
                            if (selectedItem != null) {
                                $('#jqxTree').jqxTree('expandItem', $("#jqxTree").find('li#'+parentid)[0]);
                                $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li#'+parentid)[0]);
                            }else{
                                $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
                                $('#jqxTree').jqxTree('expandAll');
                            }
                            return;
                        }catch(err){
                            location.reload();
                            //$('#window-error').jqxWindow('setContent',"JSON Error:"+err.message+"<br/>Content: "+data);
                            //$('#window-error').jqxWindow('open');
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError){
                        location.reload();
                        //$('#window-error').jqxWindow('setContent',"<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+thrownError+"<br/>"+surl);
                        //$('#window-error').jqxWindow('open');
                    }
            });
            
        });
        // Remove 
        $('#Remove').click(function () {
            var selectedItem = $('#jqxTree').jqxTree('selectedItem');
            var parentid=0;
            if (selectedItem != null) {
               parentid=selectedItem.id;
            }
            if(parentid==0){
                $('#window-notice').jqxWindow('setContent', "Không thể xóa Node gốc");
                $('#window-notice').jqxWindow('open');
                return;
            }else{
                var itemtext=selectedItem.label;
                //itemtext=itemtext.substring(0,itemtext.length-12);
                if(!confirm("Bạn muốn xóa '"+itemtext+"' ?")){
                    return;
                }
            }
            var surl="{{base_url()}}admin-planners/region/delreg";
            var sdata={
                    
                    id      :   parentid
            };
            jQuery.ajax({
                    type:"POST", 
                    data:sdata, 
                    dataType:"text", 
                    url:surl, 
                    success: function (data){
                        try{
                            var result = $.parseJSON(data);
                            var records=src(result);
                            $('#jqxTree').jqxTree({ source: records});
                            $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
                            $('#jqxTree').jqxTree('expandItem', $("#jqxTree").find('li:first')[0]);
                            return;
                        }catch(err){
                            location.reload();
                            //$('#window-error').jqxWindow('setContent',"JSON Error:"+err.message+"<br/>Content: "+data);
                            //$('#window-error').jqxWindow('open');
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError){
                        location.reload();
                        //$('#window-error').jqxWindow('setContent',"<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+thrownError+"<br/>"+surl);
                        //$('#window-error').jqxWindow('open');
                    }
            });
        });
    });
    
</script>